<template>
	<view class="box bg_f5">
		<view class="hidden" v-if="is_load">
			<view class="wrapper hidden bg_fff">
				<view class="w_top">
					<view class="flex1 w_info" style="margin-bottom: 16rpx;">
						<view class="w_info_image">
							<image :src="detail_info.image_text[0]" class="active" mode="aspectFill"></image>
							<image src="../../static/image/index/r@2x.png"></image>
						</view>
            
						<view class="w_flex1">
							<view class="font_38 text_bold">{{detail_info.store_name}}</view>
							<view class="font_23 color_40 top_m1">{{(detail_info.address).substr(0, 6)}}****</view>
              
						</view>
					</view>
          <view style="margin-bottom: 16rpx;">
            <view class="font_27" v-if="detail_info.status == 1">营业时间：{{detail_info.business_hours}}</view>
            <view class="font_27" v-else>停业中</view>
          </view>
          <view class="flex1" style="margin:0 0 16rpx;align-items: center; " v-if="detail_info.position">
            <image src="../../static/image/index/w@2x.png" mode="heightFix" style="height: 25rpx;width: 20rpx;margin: 4rpx 16rpx 0 0;" />
            <view class="font_23 flex1 color_7b" style="flex: 1; width: 100%;">{{detail_info.position}}</view>
          </view>
					<view class="bg_f9 flex3 top_des top_m2" v-if="tuik !== 1">
						<image src="../../static/image/index/a1@2x.png"></image>
						<view class="font_23 color_ff6a00 text_bold">预定后，可查看寄存点联系电话、详细地址与导航</view>
					</view>
				</view>
				<image src="../../static/image/index/z@2x.png" class="bottom_icon"></image>
			</view>
			<view class="wrapper hidden bg_fff content">
				<view class="top_p1 van-hairline--bottom">
					<view class="font_35 text_bold top_m4">寄存日期</view>
					<view class="flex8">
						<view @click="is_show = true;is_times_type = 1;">
							<view class="font_31 text_bold">{{start_M_d}}</view>
							<view class="font_23 color_7b top_m3">修改寄存时间</view>
						</view>
						<view class="font_23 day_text">{{days}}天</view>
						<view @click="is_show = true;is_times_type = 2;">
							<view class="font_31 text_bold">{{end_M_d}}</view>
							<view class="font_23 color_7b top_m3">修改取件时间</view>
						</view>
					</view>
				</view>
				<view class="flex8 van-hairline--bottom list">
					<view class="font_35 text_bold">行李箱</view>
					<view class="border_wrapper font_33 flex1">
						<view @click="get_trunk('jian')">-</view>
						<view class="text_bold color_ff6a00">{{submit_info.trunk_number}}</view>
						<view @click="get_trunk('jia')">+</view>
					</view>
				</view>
				<view class="flex8 van-hairline--bottom list">
					<view class="font_35 text_bold">背包</view>
					<view class="border_wrapper font_33 flex1">
						<view @click="get_packsack('jian')">-</view>
						<view class="text_bold color_ff6a00">{{submit_info.packsack_number}}</view>
						<view @click="get_packsack('jia')">+</view>
					</view>
				</view>
				<view class="flex8 van-hairline--bottom list" @click="get_coupon">
					<view class="font_35 text_bold">优惠券</view>
					<view>
						<view class="flex3">
							<view class="font_31 top_m5" style="color: red;" v-if="coupon_data.id">
								-¥{{coupon_data.yh_price}}
							</view>
							<view class="font_31 color_7b top_m5" v-else>{{coupon_num}}张可用</view>
							<van-icon name="arrow" color="#7b7b7b"></van-icon>
						</view>
					</view>
				</view>
				<view class="list flex9">
					<view class="font_33 text_bold">合计：¥{{submit_info.price}}</view>
				</view>
			</view>
			<view class="wrapper hidden bg_fff content">
				<view class="font_31 flex8 phone_wrapper">
					<view>联系电话</view>
					<view v-if="!mobile">
						<input type="number" class="font_31" style="text-align: right;" maxlength="11"
							placeholder="请输入手机号" placeholder-style="color: #acacac" v-model="submit_info.mobile" />
					</view>
					<view v-else>{{mobile}}</view>
				</view>
			</view>
      <view class="wrapper hidden bg_fff content">
      	<view class="font_31 flex8 phone_wrapper">
      		<view style="color: red;">注意：请确认您的存放日期</view>
      	</view>
      </view>
			<view class="flex7 top_m7">
				<view class="icon_img" @click="is_agree = !is_agree">
					<image src="../../static/image/index/b1@2x.png" v-if="!is_agree"></image>
					<image src="../../static/image/index/c1@2x.png" v-if="is_agree"></image>
				</view>
				<view class="flex3 font26 animated" :class="{'active': is_btn_num === 1}">
					<view class="color_7b">我已阅读并同意</view>
					<view class="color_ff6a00 top_p2" @click="get_link">《寄存须知》</view>
				</view>
			</view>
			<view class="bg_fff flex8 bottom_wrapper van-hairline--top">
				<view class="bottom_left flex3" style="flex: 1; width: 100%;">
					<view class="font_27 top_m6">共{{submit_info.packsack_number + submit_info.trunk_number}}件，合计</view>
					<view class="font_35 text_bold color_ff0008">¥ {{submit_info.price}}</view>
				</view>
        <navigator :url="'/pages/index/map?order='+order_detail.id" class="zb-btn" v-if="tuik === 1">修改店铺</navigator>
				<view class="zb-btn" @click="get_sure">确认下单</view>
			</view>
		</view>
		<!-- 日期 -->
		<van-popup position="bottom" :show="is_show">
			<van-datetime-picker type="date" :value="currentDate" :min-date="minDate" :formatter="formatter"
				@cancel="is_show = false;" @confirm="get_time" />
		</van-popup>
	</view>
</template>

<script>
	// 价格 = 背包单价 * 数量 * 天数 + 行李箱单价 * 数量 * 天数
	// 价格 = 天数 * (背包单价 * 数量 + 行李箱单价 * 数量)
	export default {
		data() {
			return {
				id: '',
				mobile: '',
				is_btn: true,
				is_agree: false,
				is_load: false,
				detail_info: {}, // 商家信息
				is_show: false,
				coupon_num: 0,
				days: '1', // 天数
				start_y: '', // 开始年
				end_y: '', // 结束年
				coupon_data: {}, // 优惠券
				start_M_d: '', // 开始时间
				end_M_d: '', // 结束时间
				is_btn_num: 0, // 1-文字显示抖动
				is_times_type: 1, // 1-开始 2-结束
				currentDate: new Date().getTime(),
				minDate: new Date().getTime(),
				start_t: new Date().getTime(), // 开始时间戳
				end_t: new Date().getTime(), // 结束时间戳
				now_time: new Date(),
				formatter(type, value) {
					if (type === 'year') {
						return `${value}年`;
					}
					if (type === 'month') {
						return `${value}月`;
					}
					if (type === 'day') {
						return `${value}日`;
					}
					return value;
				},
				submit_info: {
					store_id: '', // 1
					start_time: '', // 1开始时间
					end_time: '', // 1结束时间
					packsack_number: 0, // 1背包数量
					trunk_number: 0, // 1行李箱数量
					coupon_id: '', // 1优惠券id
					price: null, // 1总价
					mobile: '', // 手机号
				},
        tuik:'',
        order_detail:{}
			}
		},
		onLoad(e) {
			this.id = e.id;
      getApp().get_loading();
      this.get_detail();
      this.get_user_info();
      // this.getCouponValidList();
      this.submit_info.store_id = this.id;
      if(e.tuik == 1){
        this.submit_info.orders_id = e.order;
        console.log('111',e.tuik)
        this.tuik = 1;
        uni.setNavigationBarTitle({
          title:"修改订单"
        })
        uni.showModal({
          title:"提示",
          content:"下单后原来的订单会全额退还，请放心修改",
          showCancel:false,
          confirmText:"知道了",
          success: (e) => {
            
          }
        })
        this.$http.get(this.$api.getMyOrdersDetail, {
        	order_id: e.order,
        	'scene':true,
        }).then(res => {
        	this.order_detail = res.data;
          this.submit_info.packsack_number = res.data.packsack_number;
          this.submit_info.trunk_number = res.data.trunk_number;
          this.start_M_d = res.data.start_time.substring(5,res.data.start_time.length);
          this.end_M_d = res.data.end_time.substring(5,res.data.end_time.length);
          const s = res.data.start_time.replace('年','/').replace('月','/').replace('日','');
          const e = res.data.end_time.replace('年','/').replace('月','/').replace('日','');
          this.start_t = new Date(s).getTime();
          this.end_t = new Date(e).getTime();
          this.submit_info.start_time = res.data.start_time;
          this.submit_info.end_time = res.data.end_time;
          this.get_day_num()
          
          console.log('s=====================>,修改订单')
        })
      }else{
        console.log('=====================>新增订单')
        let m = this.now_time.getMonth()+1;
        m = m > 9 ? m :'0' + m;
        this.start_M_d = m  + '月' + this.now_time.getDate() + '日';
        this.end_M_d = m + '月' + this.now_time.getDate() + '日';
        this.submit_info.start_time = this.now_time.getFullYear() +'年' + this.start_M_d;
        this.submit_info.end_time = this.now_time.getFullYear() +'年' + this.end_M_d;
      }
			
		},
		onShow() {
      const couponData = uni.getStorageSync('couponData')
			if (couponData) {
        console.log('couponData===>',couponData)
				this.coupon_data = couponData;
				this.submit_info.coupon_id = this.coupon_data.id;
				this.get_all_price();
			}
		},
		onLaunch() {
      
		},
		methods: {
			get_detail() {
				this.$http.get(this.$api.storeDetail, {
					store_id: this.id
				}).then(res => {
					this.is_load = true;
					this.detail_info = res.data;

					this.get_all_price();
				})
			},
			get_user_info() {
				this.$http.get(this.$api.getMemberInfo).then(res => {
					if (res.data.mobile) {
						this.submit_info.mobile = res.data.mobile;

						res.data.mobile = res.data.mobile.substring(0, 3) + '****' + res.data.mobile.substring(7);

						this.mobile = res.data.mobile;
					}
				})
			},
			// 获取可用优惠券
			getCouponValidList(last_price) {
				// 判断当订单价格大于零时 去请求是否有可用优惠券
				if (last_price > 0) {
					let params = JSON.parse(JSON.stringify(this.submit_info));
          console.log('params===>',params)
          if(last_price){
            params.price = last_price
          }
          params.type_id = 1;
					this.$http.post(this.$api.getCouponValidList, {
						data: params
					}).then(res => {
						uni.hideLoading() // 关闭加载中
						this.coupon_num = res.data.list.length;
            this.coupon_data = res.data.coupon;
            this.coupon_data.yh_price = this.coupon_data.max_amount;
            this.submit_info.coupon_id = this.coupon_data.id;
            this.submit_info.price = Number(last_price) - Number(this.coupon_data.max_amount)
					})
				}

			},
			
      get_coupon() {
				if (this.coupon_num === 0) return getApp().get_msg('暂无可用优惠券');
				getApp().get_navigate_url('/pages/user/coupon?use=true&total_price=' + this.submit_info.price);
			},
			// 合计金额
			get_all_price() {
        const days = Number(this.days); //天数
        const trunk = Number(this.detail_info.trunk); // 行李箱的单价
        const trunk_number = Number(this.submit_info.trunk_number); //行李箱数量；
        const packsack = Number(this.detail_info.packsack) //背包单价
        const packsack_number = Number(this.submit_info.packsack_number) //背包数量；
				let price = days * (trunk*trunk_number + packsack*packsack_number);
        
        console.log('days=>',days, 'trunk=>',trunk, 'trunk_number=>',trunk_number, 'packsack=>',packsack, 'packsack_number=>',packsack_number, price, price > Number(this.coupon_data.max_price));
        console.log('this.submit_info.coupon_id',this.submit_info.coupon_id, this.coupon_data)
        // 已使用优惠券且 使用的优惠券的金额小于满减金额
				if (this.submit_info.coupon_id && this.coupon_data && (price > Number(this.coupon_data.max_price) || price === Number(this.coupon_data.max_price))) {
					// 现阶段 优惠券只有满减 所以只需将计算优惠金额即可 
					// price = price - this.coupon_data.max_amount;
					this.coupon_data.yh_price = this.coupon_data.max_amount;
          
				}else{
          this.submit_info.coupon_id = 0;
          this.coupon_data = {};
          this.coupon_num = 0;
          uni.hideLoading() // 关闭加载中
          console.log('优惠券不取消')
        }
        const last_price = Number(price.toFixed(2))
				

				if (last_price <= 0) {
					this.submit_info.coupon_id = 0;
					this.submit_info.price = 0;
					this.coupon_data = {};
					this.coupon_num = 0;
					uni.hideLoading() // 关闭加载中		
				}
        if(!uni.getStorageSync('couponData')){
          this.getCouponValidList(last_price);
        }else{
          this.submit_info.price = last_price - this.coupon_data.max_amount;
          uni.removeStorageSync('couponData');
        }
			},
			// 选择时间
			get_time(e) {
				this.is_show = false;
        console.log('e.detail===>',e.detail)
				if (this.is_times_type === 1) {
					this.start_t = e.detail;
					// 开始时间
          const year = this.get_date(e.detail)
          this.start_M_d = year.m;
          this.submit_info.start_time = year.y

					if (Number(this.end_t) < Number(this.start_t)) {
						this.end_t = this.start_t;
						this.end_M_d = this.start_M_d;
            this.submit_info.end_time = this.submit_info.start_time;
            console.log('开始>结束')
					}
				}

				if (this.is_times_type === 2) {
					if (e.detail < this.start_t) return getApp().get_msg('请选择正确的取件时间');

					this.end_t = e.detail;
          const year = this.get_date(e.detail)
					this.end_M_d = year.m;
          this.submit_info.end_time = year.y
				}

				this.get_day_num();
			},
			get_date(value) {
				var date = new Date(value);
				var Y = date.getFullYear();
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				var h = date.getHours();
				var m = date.getMinutes();
				var s = date.getSeconds();

				if (this.is_times_type === 1) {
					// 开始时间
					this.start_y = Y;
				}

				if (this.is_times_type === 2) {
					// 结束时间
					this.end_y = Y;
				}

				return {m:M + '月' + D + '日', y:Y + '年' + M + '月' + D + '日'};
			},
			// 计算天
			get_day_num() {
				let d_ = (this.end_t - this.start_t) / 86400000;

				this.days = Math.ceil(d_) + 1;
        console.log('this.days=====>',this.days)
				this.get_all_price();
			},



			// 行李箱数量
			get_trunk(e) {
				if (e === 'jian') {
					if (this.submit_info.trunk_number === 0) return getApp().get_msg('不可再减了')

					this.submit_info.trunk_number--;
				}

				if (e === 'jia') {
					this.submit_info.trunk_number++;
					if (this.detail_info.now_trunk_stock < this.submit_info.trunk_number) {
						getApp().get_msg('现有库存不足');
						this.submit_info.trunk_number--;
						return;
					}
				}
				getApp().get_loading();
				this.get_all_price();
			},
			// 背包数量
			get_packsack(e) {
				if (e === 'jian') {
					if (this.submit_info.packsack_number === 0) return getApp().get_msg('不可再减了')

					this.submit_info.packsack_number--;
				}

				if (e === 'jia') {
					this.submit_info.packsack_number++;
					if (this.detail_info.now_packsack_stock < this.submit_info.packsack_number) {
						getApp().get_msg('现有库存不足');
						this.submit_info.packsack_number--;
						return;
					}
				}
				getApp().get_loading();
				this.get_all_price();
			},
			// 预定须知
			get_link() {
				let reserve = this.detail_info.notice_text;
				uni.setStorageSync('ydxz', reserve);
				// getApp().get_navigate_url('/pages/fwb/index?content=' + reserve);
        getApp().get_navigate_url('/pages/fwb/index?type=jcxz');
			},
			// 确认下单
			get_sure() {
        
        if (this.detail_info.overnight === 0 && this.days > 1) {
        	uni.showModal({
        		title: '提示',
        		showCancel: false,
        		confirmText: '我知道了',
        		confirmColor: '#576B95',
        		content: '该店铺不支持行李过夜保存,请选择其他店铺',
        		success: function(res) {
        			if (res.confirm) {
        				console.log('用户点击确定');
        			} else if (res.cancel) {
        				console.log('用户点击取消');
        			}
        		}
        	});
        	return
        }
        if (this.submit_info.packsack_number === 0 && this.submit_info.trunk_number === 0) return getApp().get_msg('请填写寄存行李箱或背包数量');
        if (!this.is_agree) {
        	this.is_btn_num = 1;
        	getApp().get_msg('请勾选预定须知');
        	setTimeout(() => {
        		this.is_btn_num = 0;
        	}, 1000)
        	return
        }
        if(this.tuik === 1){
          console.log('11===========》重新下单', this.submit_info);
          getApp().get_loading();
          let self = this;
          uni.request({
          	url: self.$api.updateOrdersApi, // 接口地址
          	method: 'POST', // 接口类型
          	data: self.submit_info,
          	header: {
          		'token': uni.getStorageSync('token'),
          	},
          	beforeSend: function(request) {
          		request.setRequestHeader("X-Requested-With", "XMLHttpRequest")
          	},
          	success: function(res) {
          		uni.hideLoading() // 关闭加载中
          		if (res.data.code === 200) {
          			self.get_pay(res.data);
          		} else {
          			self.is_btn = true;
          			if (res.data.error_code === 401) {
          				setTimeout(() => {
          					getApp().get_navigate_url('/pages/index/login')
          				}, 2000)
          			}
                    
          			getApp().get_msg(res.data.message);
          		}
          	},
          	fail: function(error) {
          		//
          	}
          })
                    
          
        }else{
          if (this.submit_info.mobile.length !== 11) return getApp().get_msg('请填写正确的手机号');
          console.log('222===========》下单', this.submit_info);
          
          
          if (this.is_btn) {
            const now = new Date();
            const zy = now.getFullYear();
            const zm = now.getMonth()+1 < 10 ? '0'+(now.getMonth()+1) : (now.getMonth()+1);
            const zd = now.getDate();
            const zh = now.getHours();
            const zs = now.getSeconds();
            const nowTime = `${zy}年${zm}月${zd}日`;
            const dhs = this.detail_info.business_hours_end.split(':');
            const dh = Number(dhs[0]);
            const ds = Number(dhs[1]);
            const zdhs = (zh === dh && zs > ds || zh > dh) && this.submit_info.end_time === nowTime; //已超出打烊时间内
            if(zdhs){
              uni.showModal({
                title:'提示',
                content:'今天商家已打烊，请更改寄存日期在下单',
                showCancel:false,
                confirmText:'知道了'
              });
              return
            }
            console.log(zh,zs,dh,ds,nowTime,zdhs,this.submit_info.end_time)
            const self = this;
            if(nowTime === this.submit_info.end_time && zh > dh-1) {
              uni.showModal({
                title:'提示',
                content:'今天商家快要打烊了，确定继续下单吗',
                success: (e) => {
                  if(e.confirm){
                    self.get_order_zb()
                  }
                }
              })
            }else{
               self.get_order_zb()
            }
          	
          
          }
          			
        }
				
      },
      get_order_zb(){
        const self = this;
        getApp().get_loading();
        self.is_btn = false;
        uni.request({
        	url: self.$api.setOrders, // 接口地址
        	method: 'POST', // 接口类型
        	data: self.submit_info,
        	header: {
        		'token': uni.getStorageSync('token'),
        	},
        	beforeSend: function(request) {
        		request.setRequestHeader("X-Requested-With", "XMLHttpRequest")
        	},
        	success: function(res) {
        		uni.hideLoading() // 关闭加载中
        		if (res.data.code === 200) {
        			self.get_pay(res.data);
        		} else {
        			self.is_btn = true;
                  
        			if (res.data.error_code === 401) {
        				setTimeout(() => {
        					getApp().get_navigate_url('/pages/index/login')
        				}, 2000)
        			}
                  
        			getApp().get_msg(res.data.message);
        		}
        	},
        	fail: function(error) {
        		//
        	}
        })
      },
			get_pay(res) {
				let self = this;
        uni.showLoading({
          title:'支付中'
        })
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: res.data.order_info.timeStamp,
					nonceStr: res.data.order_info.nonceStr,
					package: res.data.order_info.package,
					signType: res.data.order_info.signType,
					paySign: res.data.order_info.paySign,
					success: function() {
						self.is_btn = true;
            getApp().get_msg('支付成功');
						uni.setStorageSync('notice_text', JSON.stringify(self.detail_info.notice_text));
						uni.setStorageSync('orderList', true);
						setTimeout(()=>{
              uni.redirectTo({
              	url: './success?id=' + res.data.order_id + '&notice_text=' + self
              		.detail_info.notice_text
              });
            },1500)
					},
					fail: function(err) {
						self.is_btn = true;
						getApp().get_msg('您放弃了支付');
					}
				});
			}
		}
	}
</script>

<style lang="less">
  .zb-btn{background-color: #FF6A00; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 40rpx; height: 64rpx; font-size: 28rpx; min-width: 160rpx; padding: 0 20rpx; box-sizing: border-box; margin-left: 20rpx; font-weight: bold;}
	.top_m1 {
		margin-top: 18rpx;
	}

	.top_m2 {
		margin: 10rpx 0 0;
	}

	.top_m3 {
		margin: 8rpx 0 0;
	}

	.top_m4 {
		margin: 0 0 21rpx 0;
	}

	.top_m5 {
		margin: 0 10rpx 0 0;
	}

	.top_m6 {
		margin: 0 12rpx 0 0;
	}

	.top_m7 {
		margin: 0 0 50rpx 0;
	}

	.top_p1 {
		padding: 20rpx 0;
	}

	.top_p2 {
		padding: 6rpx 0;
	}

	.box {
		padding-bottom: 140rpx;
		box-sizing: border-box;
	}

	.wrapper {
		width: 706rpx;
		margin: 16rpx auto;
		border-radius: 15rpx;
		overflow: hidden;

		.w_top {
			margin: 17rpx 0;
			padding: 0 24rpx;

			.w_info_image {
				width: 142rpx;
				height: 142rpx;
				border-radius: 23rpx;
				overflow: hidden;
				position: relative;
				margin-right: 23rpx;

				image {
					&:first-child {
						width: 100%;
						height: 100%;
					}

					&.active {
						filter: blur(4px);
					}

					&:last-child {
						bottom: 0;
						left: 0;
						width: 100%;
						height: 33rpx;
						position: absolute;
					}
				}
			}
		}

		.top_des {
			padding: 10rpx 23rpx;
			border-radius: 6rpx;

			image {
				width: 29rpx;
				height: 29rpx;
				margin-right: 13rpx;
			}
		}

		.bottom_icon {
			width: 100%;
			height: 4rpx;
		}
	}

	.content {
		box-sizing: border-box;
		padding: 0 24rpx;

		.day_text {
			padding: 0 17rpx 6rpx;
			border-bottom: 1px solid #707070;
		}
	}

	.list {
		height: 93rpx;
	}

	.border_wrapper {
		text-align: center;
		border-radius: 35rpx;
		border: 1px solid #D2D2D2;

		view {
			padding: 6rpx 0;

			&:first-child,
			&:last-child {
				width: 70rpx;
			}

			&:nth-child(2) {
				width: 84rpx;
				border-left: 1px solid #d2d2d2;
				border-right: 1px solid #d2d2d2;
			}
		}
	}

	.phone_wrapper {
		height: 80rpx;
	}

	.icon_img {
		padding: 10rpx;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.bottom_wrapper {
		width: 100%;
		bottom: 0;
		position: fixed;
		box-sizing: border-box;
		padding: 15rpx 20rpx 50rpx;

		.bottom_btn {
			width: 269rpx;
			height: 77rpx;
			border-radius: 35rpx;
			background: linear-gradient(273deg, #EE8332 0%, #FF6A00 100%);
		}
	}

	.animated {
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;

		&.active {
			-webkit-animation-name: shake;
			animation-name: shake;
		}
	}

	@-webkit-keyframes shake {

		0%,
		100% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0)
		}

		10%,
		30%,
		50%,
		70%,
		90% {
			-webkit-transform: translate3d(-10rpx, 0, 0);
			transform: translate3d(-10rpx, 0, 0)
		}

		20%,
		40%,
		60%,
		80% {
			-webkit-transform: translate3d(10rpx, 0, 0);
			transform: translate3d(10rpx, 0, 0)
		}
	}

	@keyframes shake {

		0%,
		100% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0)
		}

		10%,
		30%,
		50%,
		70%,
		90% {
			-webkit-transform: translate3d(-10rpx, 0, 0);
			transform: translate3d(-10rpx, 0, 0)
		}

		20%,
		40%,
		60%,
		80% {
			-webkit-transform: translate3d(10rpx, 0, 0);
			transform: translate3d(10rpx, 0, 0)
		}
	}

	.box /deep/ .van-picker__cancel {
		color: #999;
	}

	.box /deep/ .van-picker__confirm {
		color: #FF6A00;
	}

	/deep/ .van-hairline--bottom:after {
		border-color: #ddd;
	}
</style>
